<template>
  <div>
    <router-link :to="'/manage'"><p class="guanli">管理</p></router-link>
    <div class="cashback">
      <p>购物满1299.00元，可减49.00</p>
      <router-link :to="'/coupon'"><span>去凑单></span></router-link>
    </div>

    <div class="make" v-for="item in list" :key="item.id">
      <div class="makes">
        <input
          type="checkbox"
          :checked="item.checked"
          @click="
            (item.checked = !item.checked),
              checkedAll(item.checked, item.productPrice * item.n)
          "
        />
        <img :src="item.productImg" alt="" />
      </div>
      <div class="bb">
        <p>{{ item.productName }}<span>(享受满1000减100服务)</span></p>
        <i> {{ item.skuProps.color }} <strong> {{ item.skuProps.size }} </strong></i>
        <b>￥{{ (item.productPrice*item.n).toFixed(0) }}</b>
        <s>￥{{ item.productPrice * 2 }}</s>
        <span class="jian" @click="jian(item)">-</span>
        <span class="shu">{{ item.n }}</span>
        <span class="jia" @click="add(item)">+</span>
      </div> 
    </div>
    <div class="bai"></div>

    <div class="footer">
      <input type="checkbox" :checked="checked" @click="AllBox" />
      <span>全选</span>
      <h4>合计</h4>
      <h3>{{ zongji }}</h3>
     
        <h2 :class="{ active: ifHave == true }" @click="gojesuan">去结算</h2>
    
    </div>
  </div>
</template>

<script>
import { getCar } from "../../api";
export default {
  data() {
    return {
      n: 1,
      checked: false,
      zongji: 0,
      list: [
        
      ],
      ifHave:false,
			list1:[]
    };
  },

  methods: {
		gojesuan(){
		this.list1 = 	this.list.filter(item=>item.checked)
		console.log(this.list,'wwwww')
			this.$router.push({
				path:'/nonuse',
				query:{
					list1 : this.list1,
					heji : this.zongji
				}
			})
		},
    checkedAll(checked, money) {
      // console.log(money, "money");
      let selt = this.list.every((item) => item.checked);
      if (selt) {
        this.ifHave = true
        this.checked = true;
      } else {
        this.ifHave = true
        this.checked = false;
      }
      if (checked) {
        this.ifHave = true
        this.zongji = Number((this.zongji+money).toFixed(0));
      } else {
        if(this.list.filter(item=>item.checked).length == 0){
          this.ifHave = false
        }
        this.zongji = Number((this.zongji-money).toFixed(0));
      }
    },
    AllBox() {
      if (this.checked === false) {
        this.ifHave = true
        this.list.map((item) => (item.checked = true));
        this.checked = true;
        this.zongji = 0;
        this.list.forEach((item, index) => {
          this.zongji = Number((this.zongji+item.productPrice * item.n).toFixed(0));
        });
      } else if (this.checked === true) {
        this.ifHave = false
        this.list.map((item) => (item.checked = false));
        this.checked = false;
        this.zongji = 0;
      }
    },
    add(item) {
      item.checked=true
      this.ifHave = true
      item.n += 1;
      if (this.checked || item.checked) {
        this.zongji = 0;
        this.list
          .filter((item) => item.checked)
          .forEach((i, index) => {
            this.zongji = Number((this.zongji+i.productPrice * i.n).toFixed(0));
          });
      }
    },
    jian(item) {
      item.checked=true
      this.ifHave = true
      if (item.n === 1) {
        item.n = 1;
      } else {
        item.n -= 1;
      }
      if (this.checked || item.checked) {
        this.zongji = 0;
        // console.log(this.zongji);
        this.list
          .filter((item) => item.checked)
          .forEach((i, index) => {
            this.zongji = Number((this.zongji+i.productPrice * i.n).toFixed(0));
          });
      }
    },
    getCar() {
      getCar({ userId: this.$store.state.uid }).then((res) => {
        // console.log(res,'res')
        this.list = res.data.data;
        this.list.map((item) => {
          item.productImg = this.$store.state.imgsrc + item.productImg;
          item.skuProps = JSON.parse( item.skuProps )
          item.n = 1
        });
        console.log(this.list,'thislist');

      });
    },
  },
  watch:{
    // list(){
    //     this.getCar()
    // }
  },
  computed:{
    getlist(){
      this.getCar()
    }
  },

  created() {
    //   console.log(this.$store.state,'ss');
    this.getCar();
  },
};

</script>

<style scoped>
.active{
  background: red!important;
}
.guanli {
  font-size: 14px;
  color: #000;
  top: 2.5vh;
  right: 5vw;
  position: absolute;
}
.bb i {
  position: absolute;
     left: 2vw;
    bottom: 3.5vh;
    color: grey;
    font-size: 12px;
}
.bb{
  position: relative;
}

.cashback {
  justify-content: center;
  width: 100vw;
  height: 5vh;
  display: flex;
  font-size: 14px;
  align-items: center;
  background: #ffff;
  color: #999;
}
.cashback span {
  font-size: 16px;
  color: #409eff;
  
  margin-left: 125px;
}
s {
  text-decoration: line-through;
}
.make {
  width: 96vw;
  height: 20vh;
  border-radius: 10px;
  /* background: #ffff; */
  background-color: #fff;
 background-image: linear-gradient(to left, #fff , hsla(197, 41%, 90%, 0.608));
  display: flex;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 2vh;
}
.bai{
  height: 2vh;
}
.makes {
  display: flex;
  align-items: center;
  justify-content: center;
}

.make input {
  margin-left: 10px;
  margin-right: 10px;
  width: 4vw;
  height: 4vh;
}
.bb{
    width: 100vw;
    line-height: 4vh;
    position: relative;
}
.bb p{
    font-size: 14px;
    margin-bottom: 3vh;
    text-align: left;
}
i {
  margin-left: -2vw;
  font-size: 14px;
  font-style: normal;
}
strong {
  font-weight: normal;
  margin-left: 5px;
}
b {
  color: #ff6633;
  font-weight: normal;
  margin-right: 8px;
}
.make .bb s {
  color: #999999;
  margin-right: 5px;
}
.make img {
  width: 24vw;
  height: 13vh;
  margin-right: 10px;
}
.bb span {
  color: #999;
  margin: 5px 5px;
}
.shu{
  position: absolute;
  right: 8vw;
  /* bottom: 0.01vh; */
}
.jian {
text-align:center;
border:1px solid #a1a1a1;
background:#dddddd;
width:20px;
height:20px;
border-radius:100%; 
line-height: 20px;
display: inline-block;
background-color: #fff;
 background-image: linear-gradient(to bottom, #fff , #e8eff6);
 position: absolute;
 right: 0;
}
.jia {
 text-align:center;
border:1px solid #a1a1a1;
 background-color: #fff;
 background-image: linear-gradient(to bottom, #fff , #e8eff6);
width:20px;
height:21px;
border-radius:100%; 
line-height: 20px;
display: inline-block;
position: absolute;
right: 13vw;

}

.footer {
  width: 100vw;
  height: 9vh;
  background: #fff;
  margin-top: 47px;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0vh;
  background-color: #fff;
 background-image: linear-gradient(to left, #fff , hsla(198, 14%, 85%, 0.608));
}
.footer input {
  margin-left: 18px;
  width: 4vw;
  height: 4vh;
  position: relative;
}
.footer h2 {
  width: 24vw;
  height: 6vh;
  /* background-color: #409eff; */
  background-color: #fff;
 background-image: linear-gradient(to top, #fff , hsla(210, 1%, 33%, 0.608));
  text-align: center;
  line-height: 6vh;
  color: #fff;
  border-radius: 100px;
  font-size: 14px;
  position: absolute;
  bottom: 1vh;
  right: 2vw;
}

h4 {
  margin-left: 40px;
  margin-right: 5px;
}
h3 {
  font-size: 20px;
}
</style>
<style>
body {
  /* background-color: rgb(242, 242, 242); */
  background: #fff;
  display: flex;
  flex-direction: column;
  
}

</style>

